@charset "UTF-8";

//-----------------------------------------------------
// animate.scss
// 提供6组动画 fade-in/out, shrink-in/out, up-in/out, down-in/out, left-in/out, right-in/out
//-----------------------------------------------------


@mixin keyframes($name) {
    @-o-keyframes #{$name} { @content };
    @-moz-keyframes #{$name} { @content };
    @-webkit-keyframes #{$name} { @content };
    @keyframes #{$name} { @content };
}
@mixin animation-name($name...) {
    -o-animation-name: $name;
    -moz-animation-name: $name;
    -webkit-animation-name: $name;
    animation-name: $name;
}
@mixin animation-duration($duration...) {
    -o-animation-duration: $duration;
    -moz-animation-duration: $duration;
    -webkit-animation-duration: $duration;
    animation-duration: $duration;
}
@mixin animation-fillmode($fillmode...) {
    -o-animation-fill-mode: $fillmode;
    -moz-animation-fill-mode: $fillmode;
    -webkit-animation-fill-mode: $fillmode;
    animation-fill-mode: $fillmode;
}

@mixin animation-timing-function($timing...) {
    -o-animation-timing-function: $timing;
    -moz-animation-timing-function: $timing;
    -webkit-animation-timing-function: $timing;
    animation-timing-function: $timing;
}
@mixin animation-iteration-count($count...) {
    -o-animation-iteration-count: $count;
    -moz-animation-iteration-count: $count;
    -webkit-animation-iteration-count: $count;
    animation-iteration-count: $count;
}
@mixin animation-direction($direction...) {
    -o-animation-direction: $direction;
    -moz-animation-direction: $direction;
    -webkit-animation-direction: $direction;
    animation-direction: $direction;
}
@mixin animation-fill-mode($fill...) {
    -o-animation-fill-mode: $fill;
    -moz-animation-fill-mode: $fill;
    -webkit-animation-fill-mode: $fill;
    animation-fill-mode: $fill;
}
@mixin animation-play-state($state...) {
    -o-animation-play-state: $state;
    -moz-animation-play-state: $state;
    -webkit-animation-play-state: $state;
    animation-play-state: $state;
}
@mixin animation-delay($time...){
    -o-animation-delay: $time;
    -moz-animation-delay: $time;
    -webkit-animation-delay: $time;
    animation-delay: $time;
}
@mixin animation($animation...) {
    -o-animation: $animation;
    -moz-animation: $animation;
    -webkit-animation: $animation;
    backface-visibility: hidden;
    animation: $animation;
}


@include keyframes(grow) {
    from {
        -webkit-transform: scale(1);
    }
    to {
        -webkit-transform: scale(2);
    }
}
@include keyframes(fadeIn) {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.__testdemo {
    @include animation-name(grow, fadeIn);
    @include animation-duration(1s);
    @include animation-iteration-count(1);
    @include animation-direction(alternate);
    background-color: blue;
    position: absolute;
    top: 25%;
    left: 25%;
    right: 25%;
    bottom: 25%;
}



%animation-basic {
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

// fade in/out
//-----------------------------------------------------

@mixin animation-fade-in($className: fade, $from: 0) {
    $name: str-insert(In, $className, 0);

    .#{$className}-in {
        animation-name: $name;
        @extend %animation-basic;
    }
    @keyframes #{$name} {
        0% {
            opacity: $from;
        }
        100% {
            opacity: 1;
        }
    }
}

@mixin animation-fade-out($className: fade, $to: 0) {
    $name: str-insert(Out, $className, 0);

    .#{$className}-out {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 1;
        }
        100% {
            opacity: $to;
        }
    }
}

// shrink in/out
//-----------------------------------------------------

@mixin animation-shrink-in($className: shrink, $from: 0.815) {
    $name: str-insert(In, $className, 0);
    
    .#{$className}-in {
        animation-name: $name;
        @extend %animation-basic;
    }
    @keyframes #{$name} {
        0% {
            opacity: 0;
            transform: scale($from);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }
}

@mixin animation-shrink-out($className: shrink, $to: 1.185) {
    $name: str-insert(Out, $className, 0);

    .#{$className}-out {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 1;
            transform: scale(1);
        }
        100% {
            opacity: 0;
            transform: scale($to);
        }
    }
}

// down in/out
//-----------------------------------------------------

@mixin animation-down-in($className: down, $value: 100%) {
    $name: str-insert(In, $className, 0);
    
    .#{$className}-in {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 0;
            transform: translate(0, $value);
        }
        100% {
            opacity: 1;
            transform: translate(0, 0);
        }
    }
}

@mixin animation-down-out($className: down, $value: 100%) {
    $name: str-insert(Out, $className, 0);

    .#{$className}-out {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 1;
            transform: translate(0, 0);
        }
        100% {
            opacity: 0;
            transform: translate(0, $value);
        }
    }
}

// up in/out
//-----------------------------------------------------

@mixin animation-up-in($className: up, $value: -100%) {
    $name: str-insert(In, $className, 0);
    
    .#{$className}-in {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 0;
            transform: translate(0, $value);
        }
        100% {
            opacity: 1;
            transform: translate(0, 0);
        }
    }
}

@mixin animation-up-out($className: up, $value: -100%) {
    $name: str-insert(Out, $className, 0);

    .#{$className}-out {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 1;
            transform: translate(0, 0);
        }
        100% {
            opacity: 0;
            transform: translate(0, $value);
        }
    }
}

// left in/out
//-----------------------------------------------------

@mixin animation-left-in($className: left, $value: -100%) {
    $name: str-insert(In, $className, 0);
    
    .#{$className}-in {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 0;
            transform: translate($value, 0);
        }
        100% {
            opacity: 1;
            transform: translate(0, 0);
        }
    }
}

@mixin animation-left-out($className: left, $value: -100%) {
    $name: str-insert(Out, $className, 0);

    .#{$className}-out {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 1;
            transform: translate(0, 0);
        }
        100% {
            opacity: 0;
            transform: translate($value, 0);
        }
    }
}

// right in/out
//-----------------------------------------------------

@mixin animation-right-in($className: right, $value: 100%) {
    $name: str-insert(In, $className, 0);
    
    .#{$className}-in {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 0;
            transform: translate($value, 0);
        }
        100% {
            opacity: 1;
            transform: translate(0, 0);
        }
    }
}

@mixin animation-right-out($className: right, $value: 100%) {
    $name: str-insert(Out, $className, 0);

    .#{$className}-out {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 1;
            transform: translate(0, 0);
        }
        100% {
            opacity: 0;
            transform: translate($value, 0);
        }
    }
}